<template>
	<scroll-view class="couponContainer" scroll-y="true" @scrolltolower="isDown">
		<view class="couponBox" >
			<view v-for="(item,index) in list" :key="index" class="couponFor" v-if="list.length>0">
				<view class="couponItem">
					<image style="width: 30px;margin-top: 10px;" src="@/static/youhuiquan.png" mode="widthFix"></image>
					<view class="itemText">
						<view>{{item.name}}</view>
						<view class="bottom">
							<view>领取后{{item.day_limit}}天可用</view>
						</view>
						<view class="bottom">{{item.cate_limit === 1? '全类目':item.text}}可用</view>
					</view>
				</view>
				<view class="buttonText" @click="getCoupon(item)">立即领取</view>
			</view>
			<view v-else class="kong">
				<img class="img" style="width: 50px;height: 50px;" src="@/static/kong.png" alt="">
				<view>暂无优惠券~</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	import { couponForGetList, couponForGet } from '@/api/home.js'
	export default {
		data() {
			return {
				list:[],
				page:1,
				total:0,
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			getList() {
				couponForGetList({page:this.page}).then(res=>{
					this.total = res.data.total
					res.data.items.map(item=>{
						let config = []
						item.cates.map(demo=>{
							config.push(demo.category.name)
							
						})
						item.text = config.join(',')
						this.list.push(item)
					})
				})	
			},
			isDown(){
				if(this.total > this.list.length ){
					this.page+=1
					this.getList()
				}
			},
			getCoupon(data) {
				couponForGet({couponDispatchId:data.couponDispatchId}).then(res=>{
					if(res.code === 200) {
						uni.showToast({
							title: '领取成功',
							icon:'none'
						})
						let index = this.list.findIndex(item=>{return item.couponDispatchId === data.couponDispatchId})
						this.list.splice(index,1)
					}else{
						uni.showToast({
							title: res.message,
							icon:'none'
						})
					}
				})
			}
		}
	}
</script>

<style scoped lang="less">
	::v-deep ::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
		color: transparent;
	}
	.couponContainer{
		height: calc(100vh - 10px);;
		padding: 10px 15px;
		box-sizing: border-box;
	}
	.goodsScroll{
		height: 100vh;
	}
	.couponBox{
		background-color: #fff;
		border-radius: 4px;
		padding: 10px;
		height: 100vh;
		box-sizing: border-box;
		min-height: calc(100vh - 20px);
		.couponFor{
			border: 1px solid #f5f5f5;
			border-radius: 4px;
			margin-bottom: 15px;
			.buttonText{
				border-top: 1px solid #f5f5f5;
				color: #2c6cf4;
				text-align: center;
				padding: 10px 0;
				font-size: 14px;
			}
			.couponItem{
				display: flex;
				padding: 15px;
				.itemText{
					width: 100%;
					margin-left: 15px;
					.bottom{
						width: 100%;
						display: flex;
						font-size: 12px;
						color: #7c7c7c;
						margin-top: 5px;
						justify-content: space-between;
					}
				}
			}
		}
	}
</style>
